<template>
    <div>
        <a-row :gutter="20">
            <a-col :span="12">
                <a-card hoverable>
                    <a-card-grid style="width:50%;text-align:center">
                        <a-statistic :value="leftData.nodeNums" style="text-align: left" :valueStyle="{
                                'text-align': 'right'
                            }">
                            <template slot="title">
                                <span>区块奖励</span>
                            </template>
                        </a-statistic>
                    </a-card-grid>
                    <a-card-grid style="width:50%;text-align:center">
                        <a-statistic :value="leftData.walletBalance" style="text-align: left" :valueStyle="{
                                'text-align': 'right'
                            }">
                            <template slot="title">
                                <span>钱包绑定余额</span>
                            </template>
                        </a-statistic>
                    </a-card-grid>
                    <a-card-grid style="width:50%;text-align:center">
                        <a-statistic :value="leftData.monthAward" style="text-align: left" :valueStyle="{
                                'text-align': 'right'
                            }">
                            <template slot="title">
                                <span>当月挖矿收益</span>
                            </template>
                        </a-statistic>
                    </a-card-grid>
                    <a-card-grid style="width:50%;text-align:center">
                        <a-statistic :value="leftData.dayAward" style="text-align: left" :valueStyle="{
                                'text-align': 'right'
                            }">
                            <template slot="title">
                                <span>当天挖矿收益</span>
                            </template>
                        </a-statistic>
                    </a-card-grid>
                    <a-card-grid style="width:50%;text-align:center">
                        <a-statistic :value="leftData.blockAward" style="text-align: left" :valueStyle="{
                                'text-align': 'right'
                            }">
                            <template slot="title">
                                <span>在线节点数</span>
                            </template>
                        </a-statistic>
                    </a-card-grid>
                    <a-card-grid style="width:50%;text-align:center">
                        <a-statistic :value="leftData.height" style="text-align: left" :valueStyle="{
                                'text-align': 'right'
                            }">
                            <template slot="title">
                                <span>在线节点数</span>
                            </template>
                        </a-statistic>
                    </a-card-grid>
                </a-card>
            </a-col>
            <a-col :span="12">
                <a-card hoverable>
                    <span>燃料费分布图</span>
                    <!-- <v-chart :forceFit="true" :height="height" :data="data" :scale="scale">
                        <v-tooltip :showTitle="false" dataKey="item*percent" />
                        <v-axis />
                        <v-legend dataKey="item" />
                        <v-pie position="percent" color="item" :vStyle="pieStyle" :label="labelConfig" />
                        <v-coord type="theta" :radius="0.75" :innerRadius="0.6" />
                    </v-chart> -->
                    <div id="container"></div>
                </a-card>
            </a-col>
        </a-row>
    </div>
</template>
<script>
    import {
        mainIndexService
    } from '@/services'
    import {
        mapGetters
    } from 'vuex'
    import {
        Pie
    } from '@antv/g2plot';
    export default {
        data() {
            return {
                data: [],
                leftData: {
                    nodeNums: '', // 在线节点总数
                    walletBalance: '', // 钱包余额绑定
                    monthAward: '', // 当月挖矿收益
                    dayAward: '', // 当天挖矿收益
                    blockAward: '', // 区块奖励
                    height: '' // 主网高度
                },
            };
        },
        computed: {
            ...mapGetters('account', ['user']),
        },
        created() {},
        mounted() {
            this.loadData()
        },
        methods: {
            initChart() {
                const piePlot = new Pie('container', {
                    appendPadding: 10,
                    data: this.data,
                    angleField: 'value',
                    colorField: 'type',
                    radius: 1,
                    innerRadius: 0.64,
                    label: {
                        type: 'outer',
                        labelHeight: 28,
                        content: '{name} {percentage}',
                    },
                    statistic: {
                        title: false,
                        content: {
                            style: {
                                whiteSpace: 'pre-wrap',
                                overflow: 'hidden',
                                textOverflow: 'ellipsis',
                            },
                            content: '',
                        },
                    },
                    interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
                });

                piePlot.render();
            },
            loadData() {
                let formData = new FormData()
                formData.append('userId', this.user.userId)
                mainIndexService.getHomeIndex(formData).then(this.renderData)
            },
            renderData(res) {
                if (res.data.code == 200) {
                    console.log(res, '首页数据')
                    this.leftData.nodeNums = res.data.result.award_total // 区块奖励
                    this.leftData.walletBalance = res.data.result.walletBalance
                    this.leftData.monthAward = res.data.result.monthAward
                    this.leftData.dayAward = res.data.result.dayAward
                    this.leftData.blockAward = res.data.result.count
                    this.leftData.height = res.data.result.height
                    let array = []
                    res.data.result.list.map((item) => {
                        let obj = {
                            type: item.remark,
                            value: Number(this.delLastWord(item.reservedValue))
                        }
                        array.push(obj)
                    })
                    this.data = array
                    this.initChart()
                }
            },
            // 去掉最后一位
            delLastWord(e) {
                return e.substr(0, e.length - 1);
            }
        }
    }
</script>